<div class='title'>Jon</div>
<div class="sub">
    <div class='text indent'>
        使用Jon，可以给html元素添加一个加载之后的回调函数,使用基本格式是 <span class='red'>Jon="event1:func,func;;event2:func"</span> 。
        Jon的函数可以是一个Jet函数，全局函数或者是一串js代码。使用jet方法时可以使用多个，之间用逗号隔开。
        Jon的函数 this指代Jet元素，另有一个json参数，有四个属性：e,ele,data和jet，
        分别指代event，绑定的html元素，绑定的数据和对应的jet元素。
    </div>
    <div class='text indent'>
        Jon可以给html元素绑定多个事件，每个之间使用 双冒号隔开(<span class='red'>;;</span>)。Jon支持所有的html支持的事件。
    </div>
    <div class='text indent'>
        Jon属性如果没有事件名，则默认为click事件。Jon="func" 等价于 Jon="click:func"
    </div>
    <div class='j-code' disabled width='99%' height='auto'>
&lt;div>&lt;input type="button" jon='click:func1' value='单个事件，单个jet方法'>&lt;/div>
&lt;!--jon='click:func1' 等价于 jon='func1'-->
&lt;div>&lt;input type="button" jon='click:func1,func2' value='单个事件，多个jet方法'>&lt;/div>
&lt;div>&lt;input type="button" jon='click:func(this,opt)' value='单个事件，使用全局函数'>&lt;/div>
&lt;div>&lt;input type="button" jon='click:this.html="click:"+opt.ele.value' value='单个事件，使用js代码'>&lt;/div>
&lt;div>&lt;input type="button" jon='click:func1;;mouseenter:enter;;mouseleave:leave' value='多个事件'>&lt;/div>
&lt;br>
&lt;div j='html'>&lt;/div>
&lt;script>
    new Jet({
        data:{
            html:'测试区域'
        },
        func:{
            func1:function(opt){
                this.html='click:'+opt.ele.value;
            },
            func2:function(opt){
                this.html+='\r\nclick第二个方法:'+opt.ele.value;
            },
            enter:function(opt){
                this.html='mouseenter:'+opt.ele.value;
            },
            leave:function(opt){
                this.html='mouseleave:'+opt.ele.value;
            }
        }
    });
    function func(jet,opt){
        jet.html='click:'+opt.ele.value;
    }
&lt;/script>
    </div>
    <div class='text'>
        以下是输出的结果：
        <div class='out'>
            <div><input type="button" jon='click:func1' value='单个事件，单个jet方法'></div>
            <div><input type="button" jon='click:func1,func2' value='单个事件，多个jet方法'></div>
            <div><input type="button" jon='click:func(this,opt)' value='单个事件，使用全局函数'></div>
            <div><input type="button" jon='click:this.html="click:"+opt.ele.value' value='单个事件，使用js代码'></div>
            <div><input type="button" jon='click:func1;;mouseenter:enter;;mouseleave:leave' value='多个事件'></div>
            <br>
            <div j='html'></div>
        </div>
    </div>
    
</div>
<script>
    new Jet({
        data:{
            html:'测试区域'
        },
        func:{
            func1:function(opt){
                this.html='click:'+opt.ele.value;
            },
            func2:function(opt){
                this.html+='\r\nclick第二个方法:'+opt.ele.value;
            },
            enter:function(opt){
                this.html='mouseenter:'+opt.ele.value;
            },
            leave:function(opt){
                this.html='mouseleave:'+opt.ele.value;
            }
        },
    });
    function func(jet,opt){
        jet.html='click:'+opt.ele.value;
    }
</script>